<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客户存款</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="bg-light">

<div class="container mt-5">
    <div class="card shadow">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">客户存款</h4>
        </div>
        <div class="card-body">
            <form id="depositForm">
                <div class="mb-3">
                    <label for="cardId" class="form-label">银行卡号</label>
                    <input type="text" class="form-control" id="cardId" name="cardId" required>
                </div>

                <div class="mb-3">
                    <label for="tradeMoney" class="form-label">存款金额</label>
                    <input type="number" class="form-control" id="tradeMoney" name="tradeMoney" required>
                </div>

                <div class="mb-3">
                    <label for="remark" class="form-label">备注</label>
                    <input type="text" class="form-control" id="remark" name="remark">
                </div>

                <button type="submit" class="btn btn-success">确认存款</button>
                <a th:href="@{/customer/index}" class="btn btn-secondary ms-2">返回首页</a>
            </form>
        </div>
    </div>
</div>

<script>
    document.getElementById("depositForm").addEventListener("submit", function (e) {
        e.preventDefault();

        const cardId = document.getElementById("cardId").value.trim();
        const tradeMoney = parseFloat(document.getElementById("tradeMoney").value.trim());
        const remark = document.getElementById("remark").value.trim();

        if (!cardId || isNaN(tradeMoney)) {
            alert("请输入有效信息！");
            return;
        }

        fetch("/trade/deposit", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": localStorage.getItem("token") || ""
            },
            body: JSON.stringify({
                cardId: cardId,
                tradeMoney: tradeMoney,
                tradeType: "存款",
                remark: remark
            })
        }).then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    alert("存款成功！");
                    window.location.href = "/customer/index";
                } else {
                    alert("存款失败：" + data.message);
                }
            });
    });
</script>
</body>
</html>